<template>
  <div class="coutdown">
    <div class="coutdown-title">
      <text class="coutdown-title-text">拉新促销活动倒计时</text>
    </div>
    <div class="coutdown-contain">
      <div class="coutdown-contain-div mag20" >
        <text class="coutdown-contain-text">{{d}}天 </text>
      </div>
      <div  class="coutdown-contain-div">

        <text class="coutdown-contain-text">{{h}}</text>
      </div>
      <div >
        <text class="coutdown-contain-text mag5">:</text>
      </div>
      <div  class="coutdown-contain-div">
        <text class="coutdown-contain-text">{{m}}</text>
      </div>
      <div >
        <text class="coutdown-contain-text mag5">:</text>
      </div>
      <div  class="coutdown-contain-div" style="width: 60px;display: flex;flex-direction: row;align-items: center;justify-content: center">
        <text class="coutdown-contain-text">{{s}}</text>
      </div>

    </div>
  </div>
</template>

<script>
import myNavbar from "../../../../components/myNavbar/myNavbar";

export default {
  name: "countDown",
  components: {
    myNavbar
  },
  data() {
    return {
      sh:'',
      d:'',
      h:'',
      m:'',
      s:''
    };
  },
  created() {
    this.freshTime();
    this.changenum();
  },

  methods: {
    checktime(i){
      if(i<10){
        i="0"+i;

      }
      else{i=i;}
      return i;
    },
    freshTime(){
      // new Date('2021/09/21').getTime()

      var endtime=new Date('2021/09/21');  //这是中秋
      var nowtime=new Date();
      // console.log(nowtime.getTime())
      // endtime.getTime()

      var lefttime=parseInt(endtime.getTime()-nowtime.getTime());//这是毫秒，如果再/1000就是秒
      // 获取剩下的日、小时、分钟、秒钟
      // 一天有多少毫秒，一小时有多少毫秒，一分钟有多少毫秒，一秒钟有多少毫秒
      var dm=24*60*60*1000;
      var d=parseInt(lefttime/dm);
      var hm=60*60*1000;
      var h=parseInt((lefttime/hm)%24);
      var mm=60*1000;
      var m=parseInt((lefttime/mm)%60);
      var s=parseInt((lefttime/1000)%60);
      m=this.checktime(m);
      s=this.checktime(s);
      this.d = d;
      this.h = h;
      this.m = m;
      this.s = s;
      // document.getElementById('LeftTime').innerHTML=d+"天"+h+"小时"+m+"分钟"+s+"秒";
      if (lefttime<0) {
        // document.getElementById('LeftTime').innerHTML="活动已经结束！";
        this.d = '0';
        this.h = '00';
        this.m = '00';
        this.s = '00';
      }
    },
    changenum(){
      setInterval(()=>{
        this.freshTime()
      },1000)
    }
  },

}

</script>

<style scoped>
.coutdown{
  /*margin-top: 20px;*/
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: red;
}
.coutdown-title-text{
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 40px;
  color:#ffffff;
}
.coutdown-contain-text{
  color:#ffffff;
  font-size: 32px;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
}
.coutdown-contain{
  display: flex;
  flex-direction: row;
  margin-top: 12px;

}
.coutdown-contain-div{
  background-color: black;
}
.mag5{
  margin-right: 5px;
  margin-left: 5px;
}
.mag20{
  margin-right: 20px;
}
</style>
